Skip to main content

Check box

The Checkbox component is a versatile and intuitive tool designed for capturing user input in the form of binary choices, such as on/off or true/false. This component is particularly effective for applications that require users to select multiple options from a list, making it ideal for forms, surveys, and settings configurations. By using checkboxes, businesses can enhance the user experience by providing a clear and accessible way to make selections, especially when dealing with grouped concerns that need to be visualized in a structured manner. The ability to dynamically position items based on a predefined number of columns optimizes the layout, improving the horizontal data-to-ink ratio and making forms more concise and user-friendly.

Properties​

To effectively utilize the Checkbox component, the following data and attributes are necessary:

  • Component-Level Attributes:
    • Code: A unique identifier for the Checkbox component, used for referencing and integration within larger systems or applications. This code is essential for enabling interactions and actions related to the component.
    • Label: The text displayed beside the checkbox group, providing context and clarity to the user about the purpose of the selections.
  • Checkbox Item Attributes:
    • Code: A unique identifier for each checkbox option, used for referencing and integration within larger systems or applications. This code is essential for enabling interactions and actions related to the specific option.
    • Label: The name of the checkbox option, providing a clear description of what the option represents.
    • Help: An optional feature (default is OFF) that displays help text beside the label of the option, offering additional guidance or information to the user.
  • Group Options:
    • Mandatory Field: A setting (default is OFF) that specifies whether the checkbox group requires at least one option to be selected. This ensures that users make a necessary selection before proceeding.
    • Help: An optional feature (default is OFF) that displays help text beside the group title, providing additional context or instructions for the entire group.
    • Enabled: A setting (default is ON) that determines whether the checkbox group is active and can be interacted with by the user. If disabled, the group is visually indicated as inactive, preventing user interaction.
    • "Reset Answers": A feature that allows users to clear all selections in the checkbox group, resetting the form to its initial state.
    • Add a "Select All" Option: An optional feature (default is OFF) that provides a single button to select all options in the group, useful when all options are relevant for the user.

By structuring the Checkbox component with these attributes, businesses can create a flexible and user-friendly interface that effectively captures multiple user selections. The ability to customize options, provide help text, and control user interaction ensures that the component remains a powerful tool for enhancing application functionality and user experience.

Style​

Best Practices​

  • Clarity and Usability: Ensure that each checkbox is clearly labeled to indicate its purpose. Use descriptive labels that help users understand their choices.
  • Accessibility: Make sure checkboxes are accessible by providing proper labels and ensuring they can be navigated using keyboard shortcuts and screen readers.
  • Consistent Styling: Maintain consistent styling for checkboxes across your application to create a cohesive user experience.

Highest Value Features​

  • Label Visibility: Ensure that labels are easily readable and positioned close to their corresponding checkboxes for better usability.
  • Feedback on Selection: Provide visual feedback when a checkbox is selected, such as changing the color or adding a checkmark, to enhance user interaction.
  • Group Related Options: Group checkboxes logically to help users understand the relationship between options.

All the Settings​

Border​

  • BORDER: Customize the border style, width, and color of the checkbox to define its outline and separation from other elements. Use the following settings:
    • BORDER OPTIONS:
      • Style: solid, dashed, dotted, etc.
      • Width: specify the thickness of the border in pixels.
      • Color: choose a color using a color picker or HEX, RGBA, HSLA values.

Padding​

  • PADDING: Adjust the padding around the checkbox to create space between the checkbox and its label. Use the following settings:
    • PADDING OPTIONS:
      • Icon: all padding, top padding, left padding, bottom padding, right padding.
      • Size: in pixels using up and down arrows or by entering a numeric value.

Background​

  • BACKGROUND: Customize the background of the checkbox using the following settings:
    • BACKGROUND OPTIONS:
      • Background Color: Set the background color using a color picker or enter values in HEX, RGBA, or HSLA format.
      • Image: Select an image from the media library or provide a URL for an online image.
      • Background Attachment: Choose how the background behaves with options like scroll, fixed, local, initial, or inherit.
      • Background Position X/Y: Adjust the position of the background image along the X-axis (horizontal) and Y-axis (vertical) using pixel values.
      • Background Repeat: Control how the background image repeats with options like repeat, repeat-x, repeat-y, no-repeat, initial, or inherit.
      • Background Size: Set the size of the background image to auto, cover, contain, or use specific dimensions.
      • Background Origin: Define the positioning area of the background with options like border-box, padding-box, content-box, initial, or inherit.

Label Style​

  • LABEL STYLE: Customize the font and appearance of the label associated with the checkbox using the following settings:
    • Design System: By default this follows the "Label medium" on the active design system.
    • FONT OPTIONS:
      • Alignment: left, center, right, aligned.
      • Font type: choose from available font families.
      • Font-size: number expressed in px, em, or rem (where "em" is relative to the font size of the element itself, and "rem" is relative to the root element's font size).
      • Letter spacing: in pixels.
      • Line height: in pixels.
      • Style: normal, italic, oblique, initial (inherits the browser’s default), inherit (inherits from the parent element).
      • Weight: thin, extra light, light, normal, medium, semi bold, bold, extra bold, black.
      • Color: picker or values in HEX, RGBA, HSLA.
      • Stretch: Normal, semi condensed, condensed, extra condensed, ultra condensed, semi expanded, expanded, extra expanded, ultra expanded.
      • Variant: normal, small caps, initial (inherits the browser’s default), inherit (inherits from the parent element).
      • Caps variant: normal, small caps, all small caps, mini caps, all mini caps, unicase, titling caps, initial (inherits the browser’s default), inherit (inherits from the parent element).

Answer Style​

  • ANSWER STYLE: Customize the font of the text for the checkbox options using the following settings:
    • FONT OPTIONS: (same as above).
      • Design System: By default this follows the "Label medium" on the active design system.
    • Margin: Sets the margin of the answers
    • Color of selection: The color of a selected checkbox
      • Design System: By default this follows the "Label medium" on the active design system.
    • Number of columns: Define in how many columns the answers should be visualized
    • Column gutter: Define how many space there is between columns of answers.

Explanation of Terms​

  • Initial: Sets the property to its default value as defined in the CSS specification.
  • Inherit: Makes the element inherit the property from its parent element.
  • em/rem: Relative units based on the font size of the element or root element, respectively. An "em" is relative to the font size of the element itself, while a "rem" is relative to the font size of the root element (usually the <html> element).

This style guide provides a comprehensive overview of the styling options available for the Checkbox Field component in NoCode-X, ensuring users can create visually appealing and functional designs.

Actions​

Event: On Change​

  • This action is executed whenever the checkbox is changed by the user.
  • It triggers actions or processes based on the new state of the checkbox, allowing for responsive updates within the application.

Compatible functions​

  • Add Check box choice
  • Get code from a Check box field
  • Get value of Check box field
  • Remove Check box choice
  • Set invalid message of Checkbox field
  • Set value of Check box field
  • Set values of Check box field
  • Get Check box component by code